<template>
  <yd-layout>
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="个人中心" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
      <span slot="right" class="u-my-manage-save" @click="onSubmit">保存</span>
    </yd-navbar>

    <div class="m-ct-bg m-my-manage-ct">

      <yd-cell-group ref="inputGroup">
        <yd-cell-item>
          <span slot="left">昵称：</span>
          <yd-input slot="right" required
            type="text" 
            v-model="userInfo.nickName"
            regex="^\w{4,25}$"
            max="25"
            placeholder="请输入昵称"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">性别：</span>
          <yd-input slot="right" required readonly
            type="text" 
            v-model="userInfo.sex == -1 ? '男' : '女'"
            regex="^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,20}$"
            placeholder="请选择性别"
            :showClearIcon="false"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false"
            @click.native="sexShow = true">
          </yd-input>
        </yd-cell-item>
         <yd-cell-item>
          <span slot="left">手机号码</span>
          <yd-input slot="right" required readonly
            disablded
            type="text"
            v-model="userInfo.mobile"
            max="25"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item arrow type="link" href="/reset">
          <span slot="left">修改密码</span>
        </yd-cell-item>
      </yd-cell-group>
    </div>

    <yd-actionsheet :items="sexList" v-model="sexShow"></yd-actionsheet>
  </yd-layout>
</template>

<script>
  import { mapGetters, mapActions, mapMutations } from 'vuex'
  import { apiEditUserInfo } from 'js/api'

  export default {
    data() {
      return {
        sexShow: false,
        tradeShow: false,
        sexList: [
          {
            label: '男',
            id: '1',
            callback: data => {
              this.userInfo.sex = data.id
              this.userInfo.sexName = data.label
            }
          },
          {
            label: '女',
            id: '0',
            callback: data => {
              this.userInfo.sex = data.id
              this.userInfo.sexName = data.label
            }
          }
        ],
        aTradeList: []
      }
    },
    methods: {
      ...mapActions(['fetchTradeList']),
      ...mapMutations(['setUserInfo']),
      onSubmit() {
        const oInputGroup = this.$refs.inputGroup
        let isTrue = true
        oInputGroup.$children.forEach(item => {
          const oInput = item.$children[0]
          if (oInput.errorMsg) {
            isTrue = false
            this.$toast(oInput.errorMsg, () => {
              oInput.$el.children[0].focus()
            })
          }
        })
        if (!isTrue) return
        this.userInfo.mainIndustryId = this.userInfo.mainIndustryId + ''
        apiEditUserInfo(this.token, this.userInfo).then(data => {
          this.$toast('修改成功', () => {
            const oUserInfo = this.$store.getters.userInfo
            if (oUserInfo.nickName != this.userInfo.nickName) {
              oUserInfo.nickName = this.userInfo.nickName
              this.setUserInfo(oUserInfo)
            }
            this.$router.replace('/my')
          })
        })
      },
      onFileChange(ev) {
        console.log(ev)
      }
    },
    computed: {
      ...mapGetters(['token', 'userInfo'])
    }
  }
</script>

<style lang="scss">
  .u-my-manage-save {
    color: #f00385;
    font-size: .26rem;
  }
  .m-my-manage-ct {
    .avatar-box {
      position: relative;
      width: 1.68rem;
      margin: 0 auto;
      text-align: center;
      overflow: hidden;
      p {
        font-size: .22rem;
        line-height: .5rem;
        color: #999;
      }
      input {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
      }
    }
    .avatar-bd {
      height: 1.68rem;
      border: 1px solid #dedede;
      border-radius: 1.68rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .yd-cell-box {
      input {
        padding-right: .3rem;
        text-align: right;
      }
    }
  }
</style>